<template>
  <div class="contract-detail">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
      <template #buts>
        <!-- <a-space>
          <a-button type="outline" @click="goPreview">
            <template #icon><icon-printer /></template>
            <template #default>预览PDF</template>
          </a-button>
          <a-button type="primary" v-print="printObj">
            <template #icon><icon-printer /></template>
            <template #default>打印订单</template>
          </a-button>
        </a-space> -->

        <!-- <a-button v-show="demand.info.state === 1" type="primary" @click="save">
        <template #default>保存</template>
      </a-button> -->
      </template>
    </pageHeader>
    <div class="contract-detail-header">
      <h2>
        <span>
          {{ OrderDetailData.info.number }}
        </span>
        <span
          :style="{
            marginLeft: '10px',
          }"
        >
          <!-- {{ dayjs(OrderDetailData.created_at).format('YYYY-MM-DD hh:mm:ss') }} -->
        </span>
      </h2>
      <div class="contract-detail-header-box">
        <table border="1" cellspacing="0">
          <tbody>
            <tr>
              <td>供应商名称</td>
              <td> {{ OrderDetailData.info.supplierName }} </td>
              <td>采购金额</td>
              <td>{{ `${OrderDetailData.info.totalPrice}$` }} </td>
            </tr>
            <tr>
              <td>业务员</td>
              <td> {{ OrderDetailData.info.salesmanName }} </td>
              <td>创建时间</td>
              <td> </td>
            </tr>
            <tr>
              <td>完成进度</td>
              <td colspan="3">{{ '--' }} </td>
            </tr>
          </tbody>
        </table>
        <div class="contract-detail-header-box-qrcode"
          ><qrcode-vue
            :value="`${OrderDetailData.info.id}`"
            :size="200"
            level="H"
          ></qrcode-vue>
        </div>
      </div>
    </div>
    <div class="contract-detail-tabs">
      <a-tabs v-model:active-key="tabsActive" default-active-key="1" lazy-load>
        <a-tab-pane v-for="item in tabs" :key="item.key" :title="item.title">
          <baseInfo v-if="item.key === '1'"></baseInfo>
          <orderInfo
            :orderInfo="OrderDetailData.info"
            v-else-if="item.key === '2'"
          ></orderInfo>
          <bayAndInvoice v-else-if="item.key === '3'"></bayAndInvoice>
          <contractRecords
            v-else-if="item.key === '4'"
            :contractId="contractId"
          ></contractRecords>
          <Qrcode v-else-if="item.key === '5'"></Qrcode>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- <stateStapsModal
      v-model:visible="isChangeState"
      @changeStepsEmit="changeStepsEmit"
      :state="contractDetailList.state"
      :state-list="stateList"
    ></stateStapsModal> -->
    <PreviewModel
      ref="PreviewModelRef"
      v-model:visible="modelVisible"
      :orderInfo="OrderDetailData.info"
    ></PreviewModel>
  </div>
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref,
    watchEffect,
    watch,
    onMounted,
    defineAsyncComponent,
  } from 'vue';
  import { useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import { getSinglePurchaseOrder } from '@/api/buy-management/buy-order/index';
  import { GetClientDetail } from '@/api/order-management/client-management/client-list/index';
  import QrcodeVue from 'qrcode.vue';
  import baseInfo from './components/base-info/index.vue';
  import orderInfo from './components/order-info/index.vue';
  import bayAndInvoice from './components/bay-and-invoice/index.vue';
  import contractRecords from './components/contract-records/index.vue';
  // import PreviewModel from './components/PreviewModel.vue';

  const route = useRoute();
  const id = Number(route.query.id);
  const title: string = '订单档案';
  const breadCrumb: string[] = ['采购管理', '采购订单列表', '订单档案'];
  const OrderDetailData = reactive<any>({ info: {} });
  const orderData = ref();
  const modelVisible = ref(false);
  const contractId = ref();
  // const PreviewModelRef = ref();
  const printObj = {
    id: 'printMe',
  };
  const getcontractDetailData = async () => {
    try {
      const res: any = await getSinglePurchaseOrder({
        id,
      });
      OrderDetailData.info = res;
      OrderDetailData.info.id = `${OrderDetailData.info.id}`;
      orderData.value = res.product;
      contractId.value = res.contractId;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getcontractDetailData();

  let tabsActive = ref('1'); // 储存当前活跃的tabs， 默认为第一个tabs
  const tabs = reactive([
    {
      key: '1',
      title: '基本信息',
    },
    {
      key: '2',
      title: '产品信息',
    },
    {
      key: '3',
      title: '付款与发票记录',
    },
    {
      key: '4',
      title: '合同记录',
    },
    // {
    //   key: '5',
    //   title: '条码记录',
    // },
  ]);

  const goPreview = () => {
    modelVisible.value = true;
  };
</script>

<style scoped lang="less">
  .contract-detail {
    &-header {
      padding: 10px 30px;

      table {
        width: 100%;
        border-color: #f9f9f9;
        tr {
          height: 58px;
          text-align: center;
        }
        td:nth-child(odd) {
          background-color: #f5f7fa;
          width: 200px;
        }
        td:nth-child(even) {
          width: 389px;
        }
      }
      &-box {
        display: flex;
        // align-items: center;
        justify-content: center;
        &-qrcode {
          padding: 15px;
          border: 1px solid gray;
          border-left: none;
        }
      }
    }
  }

  @media print {
    /* 隐藏页眉和页脚 */
    @page {
      margin: 0;
    }
    @top-center {
      content: none;
    }
    @bottom-center {
      content: none;
    }
  }
</style>
